<template>
  <div class="top-right-btn" :style="style">
    <el-row>
      <!-- 搜索框控制 -->
      <el-tooltip
        v-if="search"
        class="item"
        effect="dark"
        :content="showSearch ? '隐藏搜索' : '显示搜索'"
        placement="top"
      >
        <el-button circle icon="Search" @click="toggleSearch()" />
      </el-tooltip>

      <!-- 导出 -->
      <el-tooltip
        v-if="isExport()"
        class="item"
        effect="dark"
        content="导出"
        placement="top"
      >
        <el-button circle icon="Download" @click="handleExport()" />
      </el-tooltip>

      <!-- 刷新功能 -->
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button circle icon="Refresh" @click="handleRefresh()" />
      </el-tooltip>
    </el-row>
  </div>
</template>

<script setup name="RightToolBar">
import { isMobile } from "@/utils/util";

/**
 * 通过 defineProps 函数定义组件 props
 */
const props = defineProps({
  /**
   * 是否显示搜索框
   */
  showSearch: {
    type: Boolean,
    default: true
  },
  /**
   * 是否导出
   */
  export: {
    type: [String, Boolean],
    default: null
  },
  /**
   * 是否显示搜索框
   */
  search: {
    type: Boolean,
    default: true
  },
  /**
   * 列表项之间的间距
   */
  gutter: {
    type: Number,
    default: 10
  }
});

const emits = defineEmits(["update:showSearch", "toggle", "refresh", "export"]);

const style = computed(() => {
  const ret = {};
  // 如果props中有传入gutter属性，则计算出marginRight
  if (props.gutter) {
    ret.marginRight = `${props.gutter / 2}px`;
  }
  return ret; // 返回计算后的样式对象
});

// 搜索
const toggleSearch = () => {
  emits("update:showSearch", !props.showSearch);
  emits("toggle");
};

// 刷新
const handleRefresh = () => {
  emits("refresh");
};

// 导出excel
const handleExport = () => {
  emits("export");
};

// 是否导出
const isExport = () => {
  if (props.export === true) {
    return true;
  }
  return false;
};

onMounted(() => {
  // 判断如果是H5则隐藏
  if (isMobile()) {
    toggleSearch();
  }
});
</script>

<style lang="scss" scoped>
:deep(.el-transfer__button) {
  display: block;
  margin-left: 0px;
  border-radius: 50%;
}

:deep(.el-transfer__button:first-child) {
  margin-bottom: 10px;
}

.my-el-transfer {
  text-align: center;
}
</style>
